<template>
    <div class="back">
        <div class="box">
            <div class="left">
                <div class="imgBox">
                    <img src="../../assets/headportrait.jpg" alt="">
                </div>
            </div>
            <div class="right">
                <p>登陆</p>
                <input class="inputBox" type="text" placeholder="用户名" maxlength="10" v-model="name">
                <input class="inputBox" type="text" placeholder="密码" maxlength="10" v-model="passWord">
                <button class="button" @click="again">登陆</button>
                <el-breadcrumb>
                    <el-breadcrumb-item :to="{ path: '' }" @click="goForgetPass">忘记密码</el-breadcrumb-item>
                    <el-breadcrumb-item :to="{ path: '' }" @click="goForgetPass">注册</el-breadcrumb-item>
                </el-breadcrumb>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: "",
    data() {
        return {
            title: "登陆界面",
            name:'',
            passWord:'',

        }
    },
    created() {

    },
    mounted() {

    },
    methods: {
        again() {
            //非空验证
            if (this.name === '' || this.passWord === '') {
                this.$message({
                    message: '用户名或密码不能为空',
                    type: 'warning'
                })
                return
            }
            //登陆验证
            if(this.name==='admin' && this.passWord==='admin'){
                this.$store.commit('user/setToken', 'ysz')
                this.$store.commit('user/setUserName', '学霸')

                //判断是否有登录前待访问路径，没有则跳转主界面
                let wantTo = this.$route.query.wantTo
                if (wantTo) {
                    this.$router.replace({ path: wantTo })
                } else {
                    this.$router.replace({ path: '/home' })
                }

            } else {
                this.$message({
                    message: '用户名或密码不正确',
                    type: 'error'
                })
            }
        },
        goForgetPass() {
            this.$message({
                message: '这个功能还没开发',
                type: 'error'
            })
        },
    },
}
</script>
<style scoped lang="scss">
.back {
    background-image: url(../../assets/1111.png);
    width: 100%;
    height: 100%;
    position: fixed;
    background-size: 100% 100%;
}

body {
    height: 100vh;
    overflow: hidden;
}

.box {
    position: relative;
    height: 350px;
    width: 500px;
    border: none;
    border-radius: 30px;
    margin: 0 auto;
    margin-top: 50vh;
    transform: translateY(-50%);
    border: 2px solid #ccc;
    display: flex;
    box-shadow: 10px 20px 25px #ccc;
    background-color: white;

    .left {
        width: 200px;

        .imgBox {
            width: 90px;
            margin: 0 auto;
            line-height: 350px;

            img {
                width: 100%;
                border-radius: 10px;
            }
        }
    }

    .right {
        width: 350px;
        border-left: 1px solid #ccc;

        p{
            text-align: center;
            margin-top: 40px;
            font-size: 20px;
            color: #4096ff;
        }

        .button {
            text-align: center;
            border-radius: 50px;
            width: 55%;
            height: 40px;
            padding: 10px;
            margin-top: 35px;
            margin-left: 50%;
            transform: translateX(-50%);
            background-color: #4096ff;
            color: #fff;
            border: none;
        }

        .inputBox {
            text-align: left;
            height: 20px;
            width: 60%;
            padding: 10px;
            margin-top: 10px;
            margin-left: 50%;
            transform: translateX(-50%);
            border: none;
            border-bottom: 2px solid #4096ff;
        }

        .el-breadcrumb {
            margin-top: 30px;
            margin-left: 100px;
        }
    }
}
</style>